<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/wow.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <header class="header">
            <div class="container clear" >
                <div class="header-left clear">
                    <div class="logo wow rubberBand" data-wow-duration="1s">
                        <a href="javascript:void(0)"><span>UR</span>FILM</a>
                        <a href="javascript:void(0)">优粤影画</a>
                        <a href="javascript:void(0)"><img src="./images/logo.png" alt=""></a>
                    </div>
                    <div class="font-right wow rubberBand" data-wow-duration="1s">
                        <a href="javascript:void(0)">梦·不止于想</a>
                    </div>
                </div>
                <input type="checkbox" id="nav-1" >
                <input type="checkbox" id="search-ck">
                <input type="checkbox" id="nav-0" >
                <div class="nav">
                    <a href="javascript:void(0)" class="wow zoomInDown" data-wow-duration=".2s" >
                        <label for="nav-1">优粤门户</label>
                        <div class="nav-check">
                            <span>优视频 <img src="./images/nav-img1.png" alt=""></span>
                            <hr />
                            <span>粤文化 <img src="./images/nav-img2.png" alt=""></span>
                            <hr />
                            <span>有机会 <img src="./images/nav-img3.png" alt=""></span>
                            <hr />
                        </div>
                    </a>
                    <a href="javascript:void(0)" class="wow zoomInDown" data-wow-duration=".4s"  >有啊社区</a>
                    <a href="javascript:void(0)" class="wow zoomInDown" data-wow-duration=".6s"  >登录</a>
                    <a href="javascript:void(0)" class="wow zoomInDown" data-wow-duration=".8s"  >注册</a>
                    <span class="wow zoomInDown" data-wow-duration="1s" >
                        <label for="search-ck">
                            <i class="fa fa-search"></i>
                            <div>
                                <input type="search" name="search" id="search" >
                                <a href="javascript:void(0)">GO</a>
                            </div>
                        </label>
                    </span>
                </div>
                <label for="nav-0"  >
                    <span></span>
                    <span></span>
                    <span></span>
                </label>
            </div>
        </header>
        <div class="banner" id="banner">
            <div class="container" id="container">
                <div id="images">
                    <img src="./images/banner-img1.jpg" alt="">
                    <img src="./images/banner-img2.jpg" alt="">
                    <img src="./images/banner-img3.jpg" alt="">
                    <img src="./images/banner-img4.jpg" alt="">
                    <img src="./images/banner-img5.jpg" alt="">
                    <img src="./images/banner-img6.jpg" alt="">
                    <img src="./images/banner-img7.jpg" alt="">
                    <img src="./images/banner-img8.jpg" alt="">
                </div>
                <div id="wr">
                    <span data-wr="left" >&lt;</span>
                    <span data-wr="right" >&gt;</span>
                </div>
                <div class="br-foot" id="br-foot">
                    <span data-run="0"><img src="./images/banner-img1.jpg" alt=""></span>
                    <span data-run="1"><img src="./images/banner-img2.jpg" alt=""></span>
                    <span data-run="2"><img src="./images/banner-img3.jpg" alt=""></span>
                    <span data-run="3"><img src="./images/banner-img4.jpg" alt=""></span>
                    <span data-run="4"><img src="./images/banner-img5.jpg" alt=""></span>
                    <span data-run="5"><img src="./images/banner-img6.jpg" alt=""></span>
                    <span data-run="6"><img src="./images/banner-img7.jpg" alt=""></span>
                    <span data-run="7"><img src="./images/banner-img8.jpg" alt=""></span>                    
                </div>
            </div>
        </div>
        <div class="nav3" >
            <div class="containers wow bounceInLeft" data-wow-duration="1s" data-wow-delay=".5s" id="nav3" >
                <a href="javascript:void(0)">校园电视台联盟</a>
                <a href="javascript:void(0)">我是艺人</a>
                <a href="javascript:void(0)">故事剧本</a>
                <a href="javascript:void(0)">制作技术</a>
                <a href="javascript:void(0)">制作互动</a>
                <a href="javascript:void(0)">素材推荐</a>
                <a href="javascript:void(0)">行业相关</a>
                <a href="javascript:void(0)">幕后心得</a>
                <a href="javascript:void(0)">粤文化</a>
                <a href="javascript:void(0)">站务</a>
                <a href="javascript:void(0)">优视频</a>
                <a href="javascript:void(0)">Ur有话说</a>
            </div>
        </div>
        <div class="body">
            <div class="containers">
                <div class="body-1 wow bounceInRight" data-wow-duration="1s" data-wow-delay="1s" id="body-1">
                    <a href="javascript:void(0)">
                        <div>
                            <p>U</p>
                            <p>R优视频</p>
                            <p>UR VIDEO</p>
                        </div>
                    </a>
                    <a href="javascript:void(0)"><img src="./images/body-img2.jpg" alt=""></a>
                    <a href="javascript:void(0)"><img src="./images/body-img3.jpg" alt=""></a>
                    <a href="javascript:void(0)"><img src="./images/body-img4.jpg" alt=""></a>
                    <a href="javascript:void(0)">
                        <img src="./images/body-img5.jpg" alt="">
                        <div id="div5">
                            <img src="./images/body-5-img.png" alt="">
                            <p>校园电视台</p>
                        </div>
                    </a>
                    <a href="javascript:void(0)"><img src="./images/body-img6.jpg" alt=""></a>
                    <a href="javascript:void(0)"><img src="./images/body-img7.jpg" alt=""></a>
                    <a href="javascript:void(0)"><img src="./images/body-img8.jpg" alt=""></a>
                </div>
                <div><span></span></div>
                <div class="body-2 ">
                    <a href="javascript:void(0)" class="wow bounceInLeft" data-wow-duration="1s">
                        <div>
                            <p>优</p>
                            <p>粤沙龙</p>
                            <p>UR SALON</p>
                        </div>
                    </a>
                    <a href="javascript:void(0)" class="wow zoomInDown" data-wow-duration="1s">
                        <img src="./images/body2-img.jpg" alt="">
                    </a>
                    <a href="javascript:void(0)" class="wow bounceInRight" data-wow-duration="1s">
                        <h4>沿途风景，全都是你</h4>
                        <p>大四这年所谓毕业季，原本作为一个
                            保研的同学，我应该过的十分悠闲，
                            但往往事与愿违，反倒是在学......</p>
                            <span>了解详情</span>
                    </a>
                </div>

                <div class="body-3">
                    <div class="bd3-lt">
                        <div >
                            <div >
                                <a href="javascript:void(0)" class="wow bounceInLeft" data-wow-duration="1s">
                                    <div>
                                        <p>U</p>
                                        <p>R有话说</p>
                                        <p>Ur Talking</p>
                                    </div>
                                </a>
                                <a href="jvaascript:void(0)" class="wow bounceInLeft" data-wow-duration="1s">
                                    <img src="./images/body3-img1.jpg" alt="">
                                </a>
                                <a href="jvaascript:void(0)" class="wow bounceInLeft" data-wow-duration="1s">
                                    <img src="./images/body3-img2.jpg" alt="">
                                </a>
                                <a href="jvaascript:void(0)" class="wow bounceInLeft" data-wow-duration="1s">
                                    <img src="./images/body3-img3.jpg" alt="">
                                </a>
                                <a href="jvaascript:void(0)" class="wow bounceInLeft" data-wow-duration="1s">
                                    <img src="./images/body3-img4.jpg" alt="">
                                    <div>
                                        <div>
                                            <h4>中国合伙人<span>130人评论过</span></h4>
                                            <p>
                                                如果说第一部是阳光的，那么第二部是黑暗的，<br />
                                                不仅仅是因为姐妹间坚固的友谊出现了裂痕，<br />
                                                也因为...<span>[详细]</span>
                                            </p>
                                            <span>xiaolingzhu</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div >
                                <a href="javascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                    <div>
                                        <p>U</p>
                                        <p>R活动</p>
                                        <p>Ur activity</p>
                                    </div>
                                </a>
                                <a href="javascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                    <img src="./images/body3-img5.jpg" alt="">
                                </a>
                                <a href="javascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                    <img src="./images/body3-img6.jpg" alt="">
                                    <div>
                                        <div>
                                            <h4>第七届FIRST青年电影展</h4>
                                            <p>FIRST青年电影展由青海省西宁<br />
                                                市人民政府、中国电影评论学会<br />
                                                联合举办，旨在将全球颇具探<br />
                                                索视角、独立自由...<span>[详细]</span></p>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                    <img src="./images/body3-img7.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <div >
                            <a href="jvascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                <div>
                                    <p>U</p>
                                    <p>R粤文化</p>
                                    <p>Ur GD CULTURE</p>
                                </div>
                            </a>
                            <div>
                                <a href="jvascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                    <img src="./images/body3-p1.jpg" alt="">
                                    <p>新闻周边</p>
                                </a>
                                <a href="jvascript:void(0)" class="wow flipInX" data-wow-duration="1s"><img src="./images/body3-p2.jpg" alt=""></a>
                                <a href="jvascript:void(0)" class="wow flipInX" data-wow-duration="1s"><img src="./images/body3-p3.jpg" alt=""></a>
                                <a href="jvascript:void(0)" class="wow flipInX" data-wow-duration="1s"><img src="./images/body3-p4.jpg" alt=""></a>
                                <a href="jvascript:void(0)" class="wow flipInX" data-wow-duration="1s"><img src="./images/body3-p5.jpg" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="bd3-gt ">
                        <div >
                            <a href="javascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                <div>
                                    <p>U</p>
                                    <p>R计划</p>
                                    <p>Ur Plan</p>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                <div>
                                    <p>电视台联盟</p>
                                    <p>School TV Alliance</p>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                <div>
                                    <p>编剧辅助计划</p>
                                    <p>Screenwriter Plan</p>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                <div>
                                    <p>导演计划</p>
                                    <p>Director Plan</p>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                <div>
                                    <p>演员计划</p>
                                    <p>Actor Plan</p>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                <div>
                                    <p>片场实践计划</p>
                                    <p>Studio Practice Plan</p>
                                </div>
                            </a>
                        </div>
                        <div  >
                            <a href="javascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                <div>
                                    <p>U</p>
                                    <p>R影视人</p>
                                    <p>Ur TV HUMAN</p>
                                </div>
                            </a>
                            <a href="javascripy:void(0)" class="wow flipInX" data-wow-duration="1s">
                                <p>CLay Li （用户ID</p>
                                <p>忠于党和国家人民</p>
                            </a>
                            <hr />
                            <a href="javascripy:void(0)" class="wow flipInX" data-wow-duration="1s">
                                <p>CLay Li （用户ID</p>
                                <p>忠于党和国家人民</p>
                            </a>
                            <hr />
                            <a href="javascripy:void(0)" class="wow flipInX" data-wow-duration="1s">
                                <p>CLay Li （用户ID</p>
                                <p>忠于党和国家人民</p>
                            </a>
                        </div>
                        <div >
                            <a href="javascript:void(0)" class="wow flipInX" data-wow-duration="1s">
                                <div>
                                    <p>U</p>
                                    <p>R广告</p>
                                    <p>advertisement</p>
                                </div>
                            </a>
                            <div id="scroll">
                                <img src="./images/scroll-img.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="book">
            <div class="containers">
                <div>
                    <hr />
                    <h4 class="wow zoomInDown" data-wow-duration="1s">有啊精华区</h4>
                </div>
                <div>
                    <div>
                        <div  class="wow flipInX" data-wow-duration="1s">
                            <img src="./images/book-img1.jpg" alt="">
                            <p>标题美女看书很入迷</p>
                            <p>★★★★<span>★</span></p>
                            <p>校园</p>
                        </div>
                        <div  class="wow flipInX" data-wow-duration="1s">
                            <img src="./images/book-img2.jpg" alt="">
                            <p>标题美女看书很入迷</p>
                            <p>★★★★<span>★</span></p>
                            <p>校园</p>
                        </div>
                        <div  class="wow flipInX" data-wow-duration="1s">
                            <img src="./images/book-img1.jpg" alt="">
                            <p>标题美女看书很入迷</p>
                            <p>★★★★<span>★</span></p>
                            <p>校园</p>
                        </div>
                        <div class="wow flipInX" data-wow-duration="1s">
                            <img src="./images/book-img1.jpg" alt="">
                            <p>标题美女看书很入迷</p>
                            <p>★★★★<span>★</span></p>
                            <p>校园</p>
                        </div>
                        <div  class="wow flipInX" data-wow-duration="1s">
                            <img src="./images/book-img2.jpg" alt="">
                            <p>标题美女看书很入迷</p>
                            <p>★★★★<span>★</span></p>
                            <p>校园</p>
                        </div>
                        <div  class="wow flipInX" data-wow-duration="1s">
                            <img src="./images/book-img1.jpg" alt="">
                            <p>标题美女看书很入迷</p>
                            <p>★★★★<span>★</span></p>
                            <p>校园</p>
                        </div>
                    </div>
                    <div>
                        <div class="wow flipInX" data-wow-duration="1s">
                            <img src="./images/book-img3.jpg" alt="">
                            <p>环太平洋<span>468人评论过</span></p>
                            <p><span>#环太平洋##环太平洋#</span>对景建筑物倒塌<br />
                                &nbsp;&nbsp;&nbsp; 弹攻击城市、外星人入侵..<span>详细</span></p>
                            <p>欧美电影</p>
                        </div>
                        <div class="wow flipInX" data-wow-duration="1s">
                            <img src="./images/book-img4.jpg" alt="">
                            <p>速度与激情6<span>783人评论过</span></p>
                            <p>【杰森·斯坦森确定加盟<span>#速#</span>】斯坦森饰演<br />
                                &nbsp;&nbsp;&nbsp; 第六部大反派欧文·肖..<span>详细</span></p>
                            <p>热映推荐</p>
                        </div>
                        <div class="wow flipInX" data-wow-duration="1s">
                            <img src="./images/book-img5.jpg" alt="">
                            <p>青春派<span>97人评论过</span></p>
                            <p>《青春派》预告片“零差评”<span>详细</span></p>
                            <p>电影预告</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <div class="containers wow bounceInDown" data-wow-duration="1s">Copyright &copy; 2013  URFILM 版权所有</div>
        </footer>
    </div>
</body>
</html>
<script>

    //初始化懒加载
    new WOW().init();

    //自适应宽高需要刷新

    var images = document.getElementById("images").getElementsByTagName("img");
    var footImg = document.getElementById("br-foot").getElementsByTagName("span");
    var container = document.getElementById("container");
    var current = 0;
    var T;

    for(var i=0;i<footImg.length;i++){
        footImg[i].addEventListener('click',checkDot);
    }

    //轮播底部
    function checkDot(e)
    {
        var index = parseInt(this.dataset['run']);

        for(var i=0;i<images.length;i++)
        {
            images[i].style.display = "none";
            images[i].className = "";
            footImg[i].className = "link";
        }

        images[index].style.display = "block";
        images[index].className = "imageAnimate";
        footImg[index].className = "hover";

        current = index;
    }

    var wr = document.getElementById("wr").getElementsByTagName("span");
    
    for(var i=0;i<wr.length;i++){
        wr[i].addEventListener('click',changeType);
    }

    //轮播左右
    function changeType(e)
    {
        
        var index = this.dataset['wr'];
        
        for(var i=0;i<images.length;i++)
        {
            images[i].style.display = "none";
            images[i].className = "";
            footImg[i].className = "link";
        }

        if(index == "left")
        {
            if(current>0)
            {
                current--;
            }else{
                current = images.length-1;
            }
            
        }else if(index == "right")
        {
            if(current < images.length-1)
            {
                current++;
            }else{
                current = 0;
            }
        }

        images[current].style.display = "block";
        images[current].className = "imageAnimate";
        footImg[current].className = "hover ";
    }

    function AutoPlay()
    {
        for(var i=0;i<images.length;i++)
        {
            images[i].style.display = "none";
            images[i].className = "";
            footImg[i].className = "link";
        }

        if(current < images.length-1)
            {
                current++;
            }else{
                current = 0;
            }

        images[current].style.display = "block";
        images[current].className = "imageAnimate";
        footImg[current].className = "hover ";
    }

    T = setInterval(AutoPlay,4000);

    container.addEventListener('mouseover',function(){
        clearInterval(T);
    })

    container.addEventListener('mouseout',function(){
        T = setInterval(AutoPlay,4000);
    })

    //自适应宽高  轮播
    var banner = document.getElementById("banner");
    var imageWidth = parseInt(document.getElementById("images").clientWidth);
    banner.style.height = imageWidth*420/1070 + "px";
   
    for(var i = 0;i<wr.length;i++){
        wr[i].style.width = imageWidth*58/1070 + "px";
        wr[i].style.height = imageWidth*58/1070*128/58 + "px";
        wr[i].style.lineHeight = imageWidth*58/1070*128/58 + "px";
        wr[i].style.fontSize = imageWidth*58/1070*40/58 + "px";
        wr[i].style.top = imageWidth*420/1070*146/420 + "px";
    }

    var brFoot = document.getElementById("br-foot");
    brFoot.style.height = imageWidth*420/1070*60/420 + "px";

    for(var i = 0;i<footImg.length;i++){
        footImg[i].style.height = imageWidth*420/1070*60/420*47/60 + "px";
    }

    //body-1 自适应宽高

    var body_1 = parseInt(document.getElementById("body-1").clientWidth);
    var body1A = document.getElementById("body-1").getElementsByTagName("a");
   
    if(body_1 < 533){
        for(var i = 1;i<body1A.length;i++){
        var width = parseInt(body1A[i].clientWidth);
        var height = parseInt(body1A[i].clientHeight);
        body1A[i].style.width = body_1*width/533 + "px";
        body1A[i].style.height = body_1*height/533 + "px";
        }

        body1A[0].style.height = body_1*163/533 + "px";

        var div = body1A[0].getElementsByTagName("div");

        div[0].style.width = body_1*230/533 + "px";
        div[0].style.height = body_1*80/533 + "px";
        div[0].style.marginTop = body_1*47/533 + "px";

        var p = body1A[0].getElementsByTagName("p");

        p[0].style.fontSize = body_1*91.33/533 + "px";
        p[1].style.fontSize = body_1*43.94/533 + "px";
        p[2].style.fontSize = body_1*19.93/533 + "px";
    }

    

    //缓慢滚动
    var scroll = document.getElementById("scroll");
    var i=10,O;
    scroll.onclick = function(){
        O = setInterval(runs,10);
    }

    function runs(){

        var scrollTop = parseInt(document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop);

        if(scrollTop==0){
            clearInterval(O);
            return;
        }else{
            window.scrollBy(0,-i);
        }
        
    }

</script>